<template>
    <div style="height: 500px">
        <flexbox v-if="!isEmpty">
            <a-tag color="#657BA3">关联业务需求</a-tag>
            <a-tag color="#FB7555">当前产品需求</a-tag>
            <a-tag color="#0176D3">关联版本</a-tag>
        </flexbox>
        <vue3-tree-org :data="treeData" :define-menus="[]" :toolBar="false" :scalable="false" :horizontal="horizontal" :collapsable="collapsable" :label-style="style" :node-draggable="true" :only-one-node="onlyOneNode" :default-expand-level="1" :clone-node-drag="cloneNodeDrag" v-if="treeData.id">
            <!-- 自定义节点内容 -->
            <template v-slot="{ node }">
                <div class="tree-org-node__text node-label" style="cursor: pointer">
                    <a-tooltip :title="node.label">
                        <div v-fitText>{{ node.label }}</div>
                    </a-tooltip>
                </div>
            </template>
        </vue3-tree-org>
        <flexbox style="height: 100%" justify="center" v-if="isEmpty">
            <a-empty />
        </flexbox>
    </div>
</template>
<script>
import { nextTick } from 'vue';
export default {
    name: 'slotTree',
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    data() {
        return {
            treeData: {},
            horizontal: true,
            collapsable: false,
            onlyOneNode: true,
            cloneNodeDrag: false,
            expandAll: true,
            style: {
                background: '#fff',
                color: '#5e6d82'
            },
            isEmpty: false
        };
    },
    methods: {
        onMenus({ node, command }) {
            console.log(node, command);
        },
        onNodeClick(e, data) {
            this.$Message.info(data.label);
        },
        expandChange() {
            this.toggleExpand(this.data, this.expandAll);
        },
        init() {
            let children = [];
            // 是否有多个产品需求
            if (this.detail.pmpProductTrackTimeDTOs && this.detail.pmpProductTrackTimeDTOs.length) {
                children = this.detail.pmpProductTrackTimeDTOs.map((item) => {
                    // 是否有版本
                    if (item.versionNumber) {
                        return {
                            id: item.id,
                            pid: this.detail.businessTrackTimeDTO.id,
                            label: item.productName,
                            style: { background: item.productName === this.detail.productName ? '#FB7555' : 'transparent', width: '300px', color: item.productName === this.detail.productName ? '#fff' : '' },
                            children: [
                                {
                                    id: item.versionId,
                                    pid: item.id,
                                    label: item.versionNumber,
                                    style: { color: '#fff', width: '100px', background: '#108ffe' }
                                }
                            ]
                        };
                    } else {
                        return {
                            id: item.id,
                            pid: this.detail.businessTrackTimeDTO.id,
                            label: item.productName,
                            style: { width: '400px', background: item.productName === this.detail.productName ? '#FB7555' : 'transparent', color: item.productName === this.detail.productName ? '#fff' : '' }
                        };
                    }
                });
                this.treeData = {
                    id: this.detail.businessTrackTimeDTO.id,
                    style: { background: '#657BA3', color: '#fff', width: '200px' },
                    label: this.detail.businessTrackTimeDTO.businessName,
                    children
                };
                // 动态设置样式，保证子节点小于7时居中显示，大于7个则进行滚动显示
                nextTick(() => {
                    const targetDom = document.getElementsByClassName('draggable');
                    if (children.length < 7) {
                        targetDom[0].style.alignItems = 'center';
                    }
                });
            } else {
                this.treeData = {
                    id: this.detail.id,
                    style: { background: '#FB7555', color: '#fff', width: '300px' },
                    label: this.detail.productName
                };
            }
        }
    },
    created() {
        this.init();
    }
};
</script>
<style lang="less" scoped>
.tree-org-node__text {
    text-align: left;
    font-size: 14px;
    .custom-content {
        padding-bottom: 8px;
        margin-bottom: 8px;
        border-bottom: 1px solid currentColor;
    }
}
::v-deep(.draggable) {
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center;
}
</style>
